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Hikes  and  trail! 


See  pictures.  topo  maps,  elevation  profiles,  and  ratings  for 
great  day  hikes  and  hiking  trails  near  US  Metropol  ian  Areas 

'.Nww  lot  .ilhikes.com/-19k-  - SMQlliLfiiiti 


o Hike;  Top  US  Hlfclm  Trails  1 C 


GORP  s Hiking  guide  offers  information  and  resources  ontne 


HTML  JavaScript 
AJAX  CSS 


CSS  Already? 


Back  in  the  ancient  days  (i.e.  before  2007)  we  got  used  to  thining  that 
CSS  was  “advanced  HTML”  and  that  it  was  “difficult” 

With  modern  browsers,  we  should  never  bother  with  the  old  ways  to 
change  font,  color,  alignment,  etc  etc. 


CSS  - Just  Do  It! 


non 


The  big  picture... 


In  the  modern  era  of  web  design 
we  represent  content  and 
meaning  in  HTML  an  formatting 
and  layout  in  CSS. 


<!DOCTYPE  html  PUBLIC  "-//W3C//DTD  XHTML  1.0  Strict// 
EN"  "http://www.w3.org/TR/xhtml  I /DTD/xhtml  I -strict.dtd"> 
<html  xmlns="http://www.w3.org/ 1 999/xhtml"  xml:lang="en"> 
<head> 

<title>University  of  Michigan</title> 


@import  "/CSS/graphical.css"/**/; 

p.text  strong,  .verbose,  .verbose  p,  .verbose  h2{text- 

indent:-876em;position:absolute} 

p.text  strong  a{text-decoration:none} 

p.text  em{font-weight:bold;font-style:normal} 

div.alert{background:#eee;border:lpx  solid  red;padding:. 

5em;margin:0  25%} 

a img{border:none} 

.hot  br,  .quick  br,  dl.feature2  img{display:none} 
div#main  label,  legend{font-weight:bold} 


Separation  of  concerns  / specialization 


Developer 


Designer 


<!DOCTYPE  html  PUBLIC  "-//W3C//DTD  XHTML  1.0 
Strict//EN"  "http://www.w3.org/TR/xhtnnl  I /DTD/xhtml  I - 
strict.dtd"> 

<html  xmlns="http://www.w3.org/ 1 999/xhtml"  xml:lang="en"> 
<head> 

<title>University  of  Michigan</title> 


@import  "/CSS/graphical.css"/**/; 

p.text  strong,  .verbose,  .verbose  p,  .verbose  h2{text- 

indent:-876em;position:absolute} 

p.text  strong  a{text-decoration:none} 

p.text  em{font-weight:bold;font-style:normal} 

div.alert{background:#eee;border:  I px  solid 


Everyone  needs  to  know  some  HTML  and  some  CSS  and  some  programming  - but  to  be  truly 
skilled  at  a professional  level  requires  deep  understanding  and  specialization. 
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HTML  has  evolved  a *lot*  over 
the  years  - as  computers  and 
networks  have  gotten  faster. 
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CSS  Syntax 


• CSS  Syntax  is  very  different  than  HTML 

• CSS  is  a set  of  “rules”  which  in  include  a “selector”  and  one  or  more 
“properties”  and  “values”  as  well  as  some  punctuation... 


body  { 

font-family:  arial,  sans-serif; 

} 


Anatomy  of  a CSS  Rule 


selector  - which  part  of  the 
document  does  this  rule  apply 
to 


body  { 

font-family:  arial,  sans-serif; 
font-size:  100%; 


property  - which 
aspect  of  CSS  are 
we  changing 


value  - What  are  we 
setting  the  property 


Partial  List  of  CSS  Properties 


color 

background-color 
visibility  (visible/hidden) 
font-family  (arial,  sans-serif) 
font-size 

font-style  (italic,  normal) 
font-weight  (bold,  normal) 
text-align 
vertical-align 

text-transform  (lowercase,  etc) 


text-decoration 

border-width 

border-style 

border-color 

margin 

border 

padding 

float  (left,  right,  none) 
left  / top 

position  (static,  relative,  absolute) 

z-index 


http://lesliefranke.com/files/reference/csscheatsheet.html 


Applying  CSS  to  our  HTML 


Inline  - right  on  an  HTML  tag  - using  the  style=  attribute 
An  embedded  style  sheet  in  the  <head>  of  the  document 
As  external  style  sheet  in  a separate  file 


<p>Google  AppEngine  is  scalable. </p> 

<p  style="color:  red;  font-weight:  bold;"> 
Don't  forget  it  is  free  (for  small  sites). </p> 
<p  style="font-family:  sans-serif; 

background-color:  green"> 

Google  AppEngine  is  easy  to  learn. </p> 


Inline 

Styles 


We  add  a style=  attribute  to 
a tag.  We  can  have  one  or 
more  properties  and  values. 
The  styling  applies  for  the 
scope  of  the  tag. 


Google  AppEngine  is  scalable. 

Don't  forget  it  is  free  (for  small  sites). 

Gooqle  AppEnqine  is  easy  to  learn. 


<head> 

<title>Learning  the  Google  App  Engine</title> 

<style  type=Mtext/css"> 
body  { 

font-family:  arial,  sans-serif; 

} 

</style> 

</head> 


The  selector  in  the  CSS  rule 
indicates  where  in  the 
displayed  content  is  to  be 
“styled”  according  to  the 
properties. 


<body> 

<h  I ><a  href="index.htm"> 

AppEngineLearn</a></h  I > 


</body> 


Learning  the  Coogle  AppEngine 

◄ ► | | 6 | | {It  | **  file:///Users/csev/Desktop/teach  * Google  » 


AppEnaineLearn 


Sites 

Topics 


Google  AppEngine:  About 


Welcome  to  the  site  dedicated  to  learning  the  Google  Application 
Engine.  We  hope  you  find  www.appengineleam.com  useful. 


External  Style  Sheet 


Preferred  because  it  allows  easy  switching  of  style  across  many  files. 

On  larger  teams,  it  also  allows  separation  of  concerns  between  the 
developer  (HTML)  and  designer  (CSS) 


<head> 

<title>Learning  the  Google  App  Engine</title> 

<linl<  type="text/css"  rel="stylesheet"  href=Mglike.css"> 
</head> 


<body> 


csev  $ Is  -I 
total  32 

-rw-r— r--  I csev  staff  44  Dec  19  06:06  glike.css 

-rw-r—  r—  I csev  staff  679  Dec  1 9 06:07  ndex.htm 

-rw-r— r—  I csev  staff  883  Dec  1 9 05:59  sites.htm 

-rw-r— r—  I csev  staff  679  Dec  1 9 05:59  topics.htm 

csev  $ 


Learning  the  uoogl 


^ file:///Users/csev/Desktop/teach/ap  * Q-  Google 


Google  App  Engine:  About 

Welcome  to  the  site  dedicated  to  learning  the  Google  Application 
Engine.  We  hope  you  find  www.appcngincleam.com  useful. 


Learning  the  Google  App  Engine 
± file:///Users/csev/Desktop/teach/ap  * Q-  Google  » 

AppEngineLearn 

• Sites 

• Topics 

Google  App  Engine:  About 

Welcome  to  the  site  dedicated  to  learning  the  Google 
Application  Engine.  We  hope  you  find 
www.appengineleam.com  useful. 


A 


First:  Just  work  with  the  tags  and  fix  fonts  / colors 


<head> 

<title>Learning  the  Google  App  Engine</title> 

<linl<  type="text/css"  rel="stylesheet"  href=Mglike.css"> 
</head> 


<body> 


body  { 

font-family:  arial,  sans-serif; 

} 

a{ 

color:  blue; 

} 

hi  a { 

text-decoration:  none; 
color:  black; 

} 


Learning  the  Google  AppEngine 

| C | ^ file:///Users/csev/Desktop/teach/a  * Google  » 

AppEngineLearn 

• Sites 

• Topics 

Google  AppEngine:  About 

Welcome  to  the  site  dedicated  to  learning  the  Google 
Application  Engine.  We  hope  you  find 
www.appenginelearn.com  useful. 

/a 


<head> 

<title>Learning  the  Google  App  Engine</title> 

<link  type="text/css"  rel="stylesheet"  href="glike.css"> 
</head> 

<body> 

<h  I ><a  href=Mindex.htm"> 

AppEngineLearn</a></h  I > 

<ul> 

<li><a  href="sites.htm">  ites</a></li> 

<li><a  href="topics.htmn  > ropics</a></li> 

</ul> 

<h  I >Google  App  Engine: About</h  I > 


Learning  the  Coogle  AppEngine 

| < | ► ] | C | 5 file:///Users/csev/Desktop/teach/a  **  Q-  Google  i 

AppEngineLearn 

• Sites 

• Topics 

Google  AppEngine:  About 

Welcome  to  the  site  dedicated  to  learning  the  Google 
Application  Engine.  We  hope  you  find 
www.appenginelearn.com  useful. 




Select  all  “a”  tags  in  the  document. 


a{ 

color:  blue; 

} 


<head> 

<title>Learning  the  Google  App  Engine</title> 

<link  type="text/css"  rel="stylesheet"  href="glike.css"> 
</head> 


<body> 

<h  I ><a  href=nindex.htm"> 


AppEngineLearn</a></h  I > 

<ul> 

<li><a  href="sites.htmM>Sites</a></li> 
<li><a  href="topics.htmM  >Topics</a></li> 
</ul> 

<h  I >Google  App  Engine: About</h  I > 


Select  tags  where  “a”  is  inside  “h  I 


Learning  the  Google  AppEngine 

| < | ► ] | C ^ file:///Users/csev/Desktop/teach/a  **  Q-  Coogle  i 

AppEngineLearn 

• Sites 

• Topics 

Google  AppEngine:  About 

Welcome  to  the  site  dedicated  to  learning  the  Google 
Application  Engine.  We  hope  you  find 
www.appenginelearn.com  useful. 

/a 


h I a { 

text-decoration:  none; 
color:  black; 

} 


Marking  Text  for  Styling 


Sometimes  we  cannot  use  an  existing  tag  in  the  document  for  styling 
so  we  use  the  span  tag 

Sometimes  we  want  to  apply  styling  to  *some*  but  all  of  the  “p”  tags 
using  the  class=  attribute 

Sometimes  we  want  to  break  the  document  into  “chunks”  using  the 
id=  attribute 


The  un-tag  <span> 


<p>Google  AppEngine  is  scalable 
and  <span  st/le="color:  red"> 
forget</span>  that  it  is  free 
for  small  sites  and  is  easy  to  learn. </p> 


Span  does  not  break  word 
wrapping  - it  simply  allows  us  to 
apply  styling  to  a segment  of  text 
within  a paragraph. 


Google  AppEngine  is  scalable 
and  don't  forget  that  it  is  free  for 
small  sites  and  is  easy  to  learn. 


Making  Some  Tags  Special 


• We  can  use  the  class=  to  mark 
tags  and  then  apply  styling 
specifically  to  those  tags. 

• We  style  these  sections  by 
writing  a rule  which  starts 
with  a period  followed  by  the 
name  of  the  class 


<head> 

<style  type="text/css"> 

.abc  { 

color:  blue; 

} 

</style> 

</head> 

<body> 

<p  class="abc">First  paragraph</p> 
<p>Second  Paragraph</p> 

<p  class="abc">Third  paragraph</p> 
</body> 


Making  Some  Tags  Special 


First  paragraph 
Second  Paragraph 
Third  paragraph 


<head> 

<style  type="text/css"> 

.abc  { 

color:  blue; 

> 

</style> 

</head> 

<body> 

<p  class="abc">  :irst  paragraph</p> 
<p>Second  Paragraph</p> 

<p  class="abc">Third  paragraph</p> 
</body> 


Defining  and  Marking  Blocks 


To  mark  out  the  scope  of  blocks,  we  use  the  id=  attribute  on  a tag. 

We  also  have  a new  block  tag  called  <div>  that  we  often  couple  with 
the  id=  attribute  on  the  div  or  other  tag 

While  the  class=  attribute  can  be  (re)used  over  and  over  on  many  tags 
in  a document,  a particular  id=  value  can  only  be  used  once  in  a 
document. 

id=  is  used  to  mark  a particular  block  in  the  document 


<body> 

<div  id="header"> 

<h  I ><a  href="index.htm">AppEngineLearn</a></h  I > 
<ul> 

<li><a  href=Msites.htmM>Sites</a></li> 

<li><a  href=,,topics.htm"  >Topics</a></li> 

</ul> 

</div> 

<div  id="contentM> 

<h2>Google  App  Engine: About</h2> 

<P> 

Welcome  to  the  site  dedicated  to 
learning  the  Google  Application  Engine. 

We  hope  you  find  www.appenginelearn.com  useful. 

</p> 

</div> 

</body> 


<div  d="header"> 

<h  I ><a  href=Mindex.htm">AppEngineLearn</a></h  I > 
<ul> 

<li><a  href="sites.htmM>Sites</a></li> 

<li><a  href="topics.htnnM  >Topics</a></li> 

</ul> 

</div> 


To  apply  styling  rules  to  a 
block  of  text  identified  using 
id=  we  use  a # character 
befor  the  id  value. 


#header  { 

background-color:  #dde; 
border-top:  3px  solid  #36c; 

} 


<body> 

<div  id="header"> 

<h  I ><a  href="index.htm">AppEngineLearn</a></h  I > 
<ul> 

<li><a  href="sites.htm">Sites</a></li> 

<li><a  href="topics.htm"  >Topics</a></li> 

</ul> 

</div> 

<div  id="content"> 

<h2>Google  App  Engine:  About</h2> 

<P> 

Welcome  to  the  site  dedicated  to 
learning  the  Google  Application  Engine. 

We  hope  you  find  www.appenginelearn.com  useful. 

</p> 

</div> 

</body> 


body  { 

font-family:  arial,  sans-serif; 

} 

#header  { 

background-color:  #dde; 
border-top:  3px  solid  #36c; 

} 

a 

{ 

color:  blue; 

} 

#header  h I a { 

text-decoration:  none; 
color:  black; 


} 


Learning  the  Coogle  AppEngine 

6 file: ///Us*  Desktop/teach /<  - Q.-  Google  » 


AppEngineLearn 

• Sites 

• Topics 

Google  AppEngine:  About 

Welcome  to  the  site  dedicated  to  learning  the  Google  Application 
Engine.  We  hope  you  find  www.appengineleam.com  useful 


body  { 

font-family:  arial,  sans-serif; 

} 

#header  { 

background-color:  #dde; 
border-top:  3px  solid  #36c; 

} 

a 

{ 

color:  blue; 

} 

#header  h I a { 

text-decoration:  none; 
color:  black; 


} 


Don’t  Overuse 
Span/Div 

Don’t  add  unnecessary  div 
tags  when  you  already 
have  a block  tag  to  add  a 
class  to 

Don’t  invent  your  own 
spans  when  something 
exists  that  will  work 


<div  class=”important”> 

<P> 

This  is 

<span  class=”heavy”>a</span 
paragraph. 

</p> 

</div> 


<p  class=”important”> 

This  is  <strong>a</strong> 
paragraph. 

</p> 


Color  Names 


W3C  has  listed  16  color  names 
that  will  validate  with  an  HTML 
validator. 

The  color  names  are:  aqua,  black, 
blue,  fuchsia,  gray,  green,  lime, 
maroon,  navy,  olive,  purple,  red, 
silver,  teal,  white,  and  yellow. 


Color  Values 

HTML  colors  can  be  defined  as  a hexadecimal  notation  for  the  combination  of  Red, 
Green,  and  Blue  color  values  (RGB). 

The  lowest  value  that  can  be  given  to  one  light  source  is  0 (hex  #00)  and  the  highest 
value  is  255  (hex  #FF). 


The  table  below  shows  the  result  of  combining  Red,  Green,  and  Blue  light  sources:. 


W3C  Standard  Color  Names 

W3C  has  listed  16  color  names  that  will  validate  with  an  HTML  validator. 

The  color  names  are:  aqua,  black,  blue,  fuchsia,  gray,  green,  lime,  maroon,  navy, 
olive,  purple,  red,  silver,  teal,  white,  and  yellow. 


http://www.w3schools.com/html/html_colors.asp 


Colors 


Three  Numbers, 
Red,  Green  , and 
Blue  - each  from  00 
- FF  (Hexidecimal) 


#ffffff  = white 
#000000  = black 
#f  f 0000  = red 
#00ff00  = green 
#0000ff  = blue 


#e2edff 


Color  Name 

AliceBlue 

AntiaueWhite 

Aoua 

Aouamarine 

Azure 

Beioe 

Bisaue 

Black 

BlanchedAlmond 

Blue 

BlueViolet 

Brown 


Color  HEX 

#FQF8FF 

#FAEBD7 

#00FFFF 

#7FFFD4 

#F0FFFF 

#F5F5DC 

#FFE4C4 

#000000 

#FFEBCD 

#0000FF 

#8A2BE2 

#A52A2A 


Color 


http://www.w3schools.com/css/css_colornames.asp 


Web-safe 

colors 


Web-Smart  Colors 


• Web-smart  colors  are  4096  colors  which 
should  easily  display  accurately  on  all 
systems  with  > 256  colors 

• Web  smart  colors  simply  use  any 
combination  of  00,  I 1 , 22, ...  cc,  dd,  ee,  ff 

• #0055ee 

http://www.morecrayons.com/palettes/webSmart 

http://www.weborum.com/color/wheel.html 


0 http://kuler.adobe.eom/#create/fromacolor 


D 


kuler 


Register 


Sign  In 


Create 
From  a Color 

From  an  Image 
Themes 
Community 
Pulse  cuss 
Links 


Select  a Rule 

Analogous 

Monochromatic 

Triad 

Complementary 

Compound 

Shades 

Custom 


Public 
l Private 

Please  sign  in  to  save  your  theme. 


http://www.colourlovers.com/ 


• Picking  a combination  of 
complimentary  colors  is  also 
important  - not  all  colors  look  good 
together 

• This  is  a very  artistic  thing  :) 


Draw! 


(5  R0TftTE  + Create  a pattern  with  this  palette 


116  CO  LOU  Riovers  viewed  thte  paoe  and  think  tamoavin  is  hotter  than  hot 


Fonts 


Default  fonts  are  ugly  and  they  have 
Serifs  - which  make  them  harder  to 
read  on  a screen 


Header  One 

Paragraph  about  ugly  default  fonts. 


So  the  first  thing  I usually  want  to  do 
is  override  the  font  in  my  document 


Figure  3.5.  Highlighting  the  serifs  of  a serif  font  (Georgia) 


And  I want  to  do  this  everywhere. 


0 00  © © 


Fonts 


Most  Favourite  Least  Favourite 

body  { > 

font-family:  "Trebuchet  MS",  Helvetica,  Arial,  sans-serif; 

font-size:  x-large; 

} 


Fallback  fonts:  serif,  sans-serif,  monospace,  cursive  and  fantasy. 


Font  Factors 


font-size: 

xx-small 

x-small 

small 

medium 

large 

x-large 

xx-large 

I4px 


font-weight:  bold  or  normal 

font-style:  normal  or  italic 

none,  underline,  overline, 
line-through 


Styling  for  Links 


File  Edit  View  Go  Bookmarks  Options  Directory 
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Back 

Home 

Reload 

Images 

Open 

Find 
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Location:  | http://www.yahoo.com/[ 

Guided  Tour  What's  New  | Questions  Net  Search  | Net  Directory  | Newsgroups  | 


chess,  hearts,  spades 
book  a flight  | 


Today’s  News  More  Yahoos 

Yahoo!  Games 

Hanson  Exclusive 
Live  Album  umim  Yahoo!  Travel 


Search 


options 


Yahoo1  Mail  - free  email  account  - use  it  from  home,  school,  work 

Yellow  Pages  - People  Search-  Maps  - Classifieds  - Personals  - Chat  - Email 
Shopping  - My  Yahoo!  - News  - Sports  - Weather  - Stock  Quotes  - more... 

• Ai  ts  and  Humanities 

Architecture.  Photography.  Literature... 

• Business  niul  Economy  [Xtra!] 

Companies.  Finance.  Employment... 


Post-Click: 


Hello  there  my  name  is  Chuck. 
Go  ahead  and  click  on  here. 


Downright  Ugly! 


• C omputers  and  Internet  [Xtra!] 

Internet  17i7Wt7S/  S! nftware  Multimedia 


Styling  Links 


a{ 

font-weight:  bold; 

} 

arlink  { 
color:  black; 

} 

a:visited  { 
color:  gray; 

} 

a:  hover  { 

text-decoration:  none; 
color:  white; 
background-color:  navy; 

} 

a:active  { 
color:  aqua; 

background-color:  navy; 

} 


link  - before  a visit 

visited  - after  it  has  been  visited 

hover  - when  your  mouse  is  over  it 
but  you  have  not  clicked 
active  - you  have  clicked  it  and  you 
have  not  yet  see  the  new  page 


Browser  default  styling  for  links  is 
downright  ugly! 


CSS  CHEAT  SHEET 


Shorthand* 

background 
border 
border- bottom 
border- left 
border- right 
border- top 
font 
list-style 
margin 
padding 

Comments 

r Comment  7 

Pseudo 

Selectors 

:hover 
:active 
:focus 
:link 
: visited 
:first-  line 
:first-  letter 

Media 

Types 

all 

braille 

embossed 

handheld 

print 

projection 

screen 

speech 

tty 

tv 

Units 

Length  % 
em 
pt 


SYNTAX 


Syntax 

selector  {property:  value:} 

External  Stylo  Sheet 

<link  rel="stybsheef  type=’text/css’  href=’styb.css*  /> 

Internal  Style 

■cstyle  type=*text/css"> 

selector  {property:  value:} 

</styb> 

Inline  Style 

<tag  styled  property:  value’> 


GENERAL 


Class  String  preceded  by  a period 

ID  String  preceded  by  a hash  mark 

div  Formats  structure  or  block  of  text 

span  Inline  formatting 

cobr  Foreground  color 

cursor  Appearance  of  the  cursor 

display  block;  inline;  list-item;  none 

overflow  How  content  overflowing  its  box  is  handled 
visible,  hidden,  scroll,  auto 

visibility  visible,  hidden 


FONT 


font-style  Italic,  normal 
font-variant  normal,  small-caps 

font- weight  bold,  normal,  lighter,  bolder,  integer  (100-900) 
font-s ize  Size  of  the  font 

font-family  Specific  font(s)  to  be  used 


TEXT 


letter- spacing  Space  between  letters 
line-height Vertical  distarcc  botweer  baselires 


BOX  MODEL 


Height 


—■Width-* 


Margin  Border  Padding 


height;  width;  margin-top:  margin- right; 
margin -bottom;  margin-left;  padding  top; 
padding- right;  padding- bottom;  padding- 
left; 


BORDER 


border-  Width  of  the  border 
width 

border-  dashed;  dotted;  double;  groove;  mset;  outset;  rdge;  solid; 

Style  none 


border-  Cobr  of  the  border 
cobr 


POSITION 


clear 

Any  floating  ebments  around  the  cbment? 
both,  left,  nght,  none 

float 

Floats  to  a specified  side 
left,  right,  none 

bft 

The  bft  positbn  of  an  ebment 
auto,  length  values  (pt.  in,  cm,  px) 

top 

The  top  positbn  of  an  ebment 
auto,  length  values  (pt,  in,  cm,  px) 

positbn 

state,  relative,  absolute 

z- index 

Ebment  above  or  below  overbpping  ebments? 
auto,  integer  (higher  numbers  on  top) 

BACKGROUND 


background-cobr  Background  cobr 

background- image  Background  image 


http://www.lesliefranke.com/files/reference/csscheatsheet.html 


Web  Developer  Tools 


• You  pretty  much  need  to  use  Firefox  for  serious  website  development 

• Important  plugins: 

• Web  Developer  - Chris  Pedrick 

• FireBug  - Joe  Hewitt 


http://addons.mozilla.org/ 


Learning  the  Coogle  AppEngine 
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Disable  T ,A,  Cookies  ▼ J CSS  ▼ j Forms  ▼ ^ Images  ▼ ^ Information  ▼ Miscellaneous  ▼ _ I 


Done 


jD 


Using  the  Firefox  Web  Developer  Plugin  you  can  see  the 
blocks  which  make  up  your  page. 


dr-chuck. com 


V"  h ’ & ^ @ http://www.dr-chuck.com/ 

Latest  Headlines.^  Sakai  dr-chuck.com  NWA  Chuck's  Medial 


Sakai  Based  Service:. 


0 ▼ [G] v Google 

iPhone  Navigation  Personal  Learning  an... 


£ Disable  ▼ ,A  Cookies 


Charles  Severance 


Ati 

.%l 


More  of 

dr-chuck's 

photos 


www.flickr.com 


CSS  ▼ n Forms  ▼ A Images  ▼ Information 


Miscellaneous 


PtTiig  rite  This  site  contains  a bunch  of  stuff  including  software,  tele 
miscellaneous  material.  This  also  includes  a number  of  activities  and  s 
my  good  friend  Richard  Wiggins. 


Recent  Video: 
Recent  Video: 


John  Merlin  Williams  Goes  Street  Racin 
Dr.  Chuck  Goes  Motocross  Racing  on  hi 


uuuiric  T J r\c^i£.c  - 

Outline  Frames 
Outline  Headings 
Outline  Links 
Outline  Tables 

Outline  Block  Level  Elements 


Tools  » View  Source 

n 


w?  imw  ^ - 

t JEW 

HSHB Quick  Links 

Chuck's  TV  and  Media 
Chuck's  Talks 
[Chuck's  Book] 
Chuck's  Columns 
Resume  and  Bio 
Blog  (26-Nov  11:44) 
[Chuck's  Papers  [ 

UM  School  of  Information  1 
[Sakai  Planet  Blog 


Teaching 

SI  182  - Building  Applications  for  Information  Environments 
SI  539  - Design  of  Complex  Web  Sites  (Rails) 

SI  543  - Introductory  Programming  (Java)  (Login) 

See  also  www.rubylearn.com  and  my  raw  course  podcasts 


V Outline  Deprecated  Elements 


Outline  Positioned  Elements 

Outline  Current  Element 
Outline  Custom  Elements... 


Web/Multimedia  sites 
A Film  About  Brent  and  His  ATV 
How  to  install  a hardwood  floor  in  4 minutes  I 

Dr.  Chuck  goes  motocross  racing  (2007) 

Dr.  Chuck  goes  stock  car  racing  (2002) 

Audition  Tape  which  we  sent  to  TechTV  which  was  rejected  :(. 

Making  a Simple  Cartoon  Three  short  animations  from  Chuck  and  Brent. 

Nuthin*  But  Net  A Television  show 

NewsTalk  870  - Rich  and  I were  on  the  radio  once  per  month  from  the  mid  90's  through  2004. 
More  Multimedia  Projects...]^ 


✓ Show  Element  Names  When  Outlining 


Software  Tools 

PHP  image  software  for  v300  and  Treo-600  SMS 
ClipBoard-2000  - Distance  Education  Software 
Sync-O-Matic  2000  - Distance  Education  Software 

Other  software  Tools 


Web  Developer 
Plugin 


Projects 

Practical  Home  Networking  - A book  that  Chuck  and  Rich  almost  got  written.  (Version  1, 


Sakai  and 

uPortal  at  UNISA  - Johan  van 
den  Berg 

Produced:  June  6.  2006  This 
video  was  taped  while  are  the 
Sakai  meeinq  in  Vancouver. 
Johan  discusses  their  upcominq 
project  to  inteqrate  uPortal  and 
Sakai  to  produce  the  UNISA 
campus  portal.  Johan  attended 
both  the  Sakai  and  JA-Siq 
meetinqs  and  descibed  the 
UNISA  approach  to  both 
cmmunities.  Details:  3 minutes, 
Windows  Media  300  kbps. 

This  is  a randomly  selected  show 


Changing  Page  Layout  in  CSS 


non 


Two  kinds  of  elements 


Inline  - affects  how  text  looks 
• strong,  span 

Block  - Containers  that  can  be  laid  out 


#navigation  li 
display:  inline; 

} 


• Paragraphs,  etc 

CSS  can  change  a tag  from  inline  to 
block 


Inline  Elements 


Flowed  with  other  text 
span,  em,  strong,  cite,  a 

Inline  tags  can  be  nested  as  long  as  they  match 

• <span  class=”important”><cite>Stuff</cite></span> 

Block  can  contain  inline  - but  inline  cannot  contain  block 


Block  Level  Elements 


Starts  on  its  own  line  - ends 
justification  and  starts  a new  block 

Can  be  a container  for  other 
elements 

hi  - h6,  p, div,  blockquote,  ul, ol, 
form 


<div  id=”content”> 
<p>One  </p> 
<p>Two</p> 
</div> 


Blocks  can  contain  other  blocks 


Learning  the  Coogle  App  Engine 
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AppEngineLearn 

• Sites 

• Topics 

Google  App  Engine:  About 

Welcome  to  the  site  dedicated  to  learning  the  Google 
Application  Engine.  We  hope  you  find 
www.appenginelearn.com  useful. 
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AppEngineLearn  sites  logics 

Google  App  Engine:  About 

Welcome  to  the  site  dedicated  to  learning  the  Google 
Application  Engine.  We  hope  you  find 
www.appengineleam.com  useful. 


Now  we  will  move  things  around,  add  background  and  borders,  etc. 


j^\  ^ 
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<div> 


<m>  AppEngineLearn 


Think  of  a block  as 
something  to  push  around 
the  screen. 


<body> 

<div  id="header"> 

<h  I ><a  href="index.htm">AppEngineLearn</a></h  I > 
<ul> 

<li><a  href=Msites.htmM>Sites</a></li> 

<li><a  href=,,topics.htm"  >Topics</a></li> 

</ul> 

</div> 

<div  id="contentM> 

<h2>Google  App  Engine: About</h2> 

<P> 

Welcome  to  the  site  dedicated  to 
learning  the  Google  Application  Engine. 

We  hope  you  find  www.appenginelearn.com  useful. 

</p> 

</div> 

</body> 


» 


body  { 

font-family:  arial,  sans-serif; 

} 

#header  { 

background-color:  #dde; 
border-top:  3px  solid  #36c; 

} 

a{ 

color:  blue; 

} 

#header  h I a { 

text-decoration:  none; 
color:  black; 
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AppEngineLearn 

• Sites 

• Topics 

Google  App  Engine:  About 

Welcome  to  the  site  dedicated  to  learning  the  Google 
Application  Engine.  We  hope  you  find 
www.appenginelearn.com  useful. 


I 


} 


AppEngineLearn 


<body> 

<div  id="header"> 

<h  I ><a  href=,,index.htm,,>AppEnpineLearn</a></h  I > 
<ul> 

<li><a  href="sites.htm">Sites</; 

<li><a  href="topics.htm"  >Topi< 

</ul> 

</div> 

<div  id="content"> 

<h2>Google  App  Engine:  About<, 

<P> 

Welcome  to  the  site  dedicated  tc 
learning  the  Google  Applica  ion  E 
We  hope  you  find  www.appengin< 

</p> 

</div> 

</body> 
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Google  1 


^ Disable  ▼ Cookies  T CSS  * Forms  ▼ M Images  ▼ 'j)  Information  ▼ Miscellaneous  ▼ Outline 


**> Google  App  Engine:  About 

<p>  Welcome  to  the  site  dedicated  to  learning  the  Google  Application  Engine.  We  hope  you 
find  www.appenginelearn.com  useful. 


Next  we  will  move  these  blocks  around. 


#header  { 

background-color:  #dde; 
border-top:  3px  solid  #36c; 

height:  100%; 
overflow:hidden; 

} 


Learning  the  Google  App  Engine 

< )~  (cO  Cx")  ( U file:///Users/csev/Desktop/publish/bo  ■&▼')•  CSfc  Coogle  Q^) 
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<dlv> 

AppEngineLearn 

|<u>>j 

• Sites 

• Topics 

«div> 

Google  App  Engine:  About 

cP>  Welcome  to  the  site  dedicated  to  learning  the  Google  Application  Engine.  We  hope  you 
find  www.appengineleam.com  useful. 

Done  & 4?  ^ 

#header  { 

background-color:  #dde; 
border-top:  3px  solid  #36c; 

height:  100%; 
overflow:hidden; 

} 

#header  li  { 
font-size:  I4px; 
display:  inline; 

} 


#header  { 

background-color:  #dde; 
border-top:  3px  solid  #36c; 

height:  100%; 
overflow:hidden; 

} 

#header  li  { 
font-size:  I4px; 
display:  inline; 

} 

#header  ul  { 
list-style:  none; 
float:right; 

vertical-align:  middle; 


} 


#header  { 

background-color:  #dde; 
border-top:  3px  solid  #36c; 

height:  100%; 
overflow:hidden; 


#header  li  { 
font-size:  I4px; 
display:  inline; 

} 

#header  ul  { 
list-style:  none; 
float:right; 

vertical-align:  middle; 

} 

#header  h I { 
font-size:  20px; 
float:  left; 

vertical-align:  middle; 


} 
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A 

Now  lets  do  some  “tweaking”  to  make  it  more  visually  pleasing... 


CSS  Box  Model 


• height  and  width  properties  size  the  block  element 

• margin  properties  define  the  space  around  the  block  element 

• border  properties  define  the  borders  around  a a block  element 

• padding  properties  define  the  space  between  the  element  border  and  the 
element  content 

• background  properties  allow  you  to  control  the  background  color  of  an 
element,  set  an  image  as  the  background,  repeat  a background  image 
vertically  or  horizontally,  and  position  an  image  on  a page 


http://reference.sitepoint.com/css/boxmodel 


.trapped  { 
height:  lOOpx; 
width:  200px; 

background:red; 

padding:  20px; 

border:  5px  solid  yellow; 
margin:  20px; 
font-family:Arial; 
color:orange; 
font-size:20px; 

} 


<p  class=,,trapped,,> 

I am  trapped  in  a glass  case  of  emotion 
which  is  lOOpx  high  and  200px  wide. 

</p> 


The  Box  Model 


.trapped  { 
height:  50px; 
width:  50px; 

} 

.trapped2  { 
height:  50px; 
width:  50px; 

padding:  lOpx; 

border:  5px  solid  yellow; 

} 

<p  class="trappedM> 
One</p> 

<p  class="trapped2"> 
Two</p> 


Border,  padding,  and  margin  are  additive. 


#header  { 

background-color:  #dde;  #header  li  { 
border-top:  3px  solid  #36c;  font-size:  I4px; 

height:  100%;  display:  inline; 

overflow:hidden:  padding:  .5em; 


padding:  7px; 
margin-top:  5px; 

} 

#header  h I { 
font-size:  20px; 
float:  left; 

vertical-align:  middle; 

margin:  0; 

padding:  0 0 0 .3em; 

\ 


} 

#header  ul  { 
list-style:  none; 
text-align:  right; 
float:  right; 

vertical-align:  middle; 
margin:  0; 
padding:  0; 

} 


top,  right,  bottom,  left 
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} 


Giving  Navigation  Clues... 


<div  id="header"> 

<h  I ><a  href="index.htm">AppEngineLearn</a></h  I > 
<ul> 

<li><a  href="sites.htm"  class="selected">Sites</a></li> 
<li><a  href="topics.htm"  >Topics</a></li> 

</ul> 

</div> 


#header  li  a.selected  { 
color:  black; 
text-decoration:  none; 

} 


<div  id="header"> 

<h  I ><a  href="index.htm">AppEngineLearn</a></h  I > 

<ul> 

<li><a  href="sites.htm">Sites</a></li> 

<li><a  href="topics.htm"  class="selected">Topics</a></li> 
</ul> 

</div> 
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• Python  Basics 

• Python  Functions 

• Python  Python  Objects 

• Hello  World 

• The  WebApp  Framework 

• Using  Templates 

J 


Tranforming  the  look  and  feel  of  a page  using  a CSS  style  sheet. 
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Sites 

Topics 


App  Engine:  Sites 

Here  arc  some  sites  we  hope  you  find  useful: 


App  Engine  Learn 
Goode  Add  Engine  Site 


body  { 

font-family:  arial,  san-serif; 

} 

a,  a:link 

{ 

color:  #0000cc; 


} 
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CSS  Validation 


You  can  validate  your  CSS  to  make  sure  it  has  no  syntax  errors 
Browsers  will  generally  quietly  ignore  bad  CSS  syntax 


http://jigsaw.w3.org/css-validator 

The  validator  can  save  you  time 
and  sanity 


Zen  Garden 


• A social  site  where  CSS 
designers  show  their  “stuff” 

• The  HTML  never  changes  - 
only  the  CSS 

• Inspiration  for  us  designers 


THE  BEAUTY  OF  CSS  DESIGN 

ZENGARDEN 


A demonstration  of  what  can  be  accomplished  visually  through 
CSS-based  design.  Select  any  style  sheet  from  the  list  to  load  it  into  this 
page. 


The  Road  to  Enlightenment 

Littering  a dark  and  dreary  road  lay  the  past  relics  of  browser-specific 
tags,  incompatible  DOMs,  and  broken  CSS  support. 

Today,  we  must  clear  the  mind  of  past  practices.  Web  enlightenment  has 
been  achieved  thanks  to  the  tireless  efforts  of  folk  like  the  W3C,  WaSP 
and  the  major  browser  creators. 

The  css  Zen  Garden  invites  you  to  relax  and  meditate  on  the  important 


http://www.csszengarden.com/ 


CSS  Summary 

CSS  Layout  is  its  own  art  and  science 

CSS  Basics  are  well  established  and  well  supported  in  all  modern  browsers 

The  box  model  is  pretty  straightforward  - and  allows  nice  design  within  the 
standards  with  reasonable  effort  levels. 

Site  layout  and  markup  is  further  evolving  - mostly  to  make  it  increasingly 
possible  to  support  desktop  like  experiences  on  the  web. 

These  innovations  will  naturally  cause  incompatibilities  - which  make  things 
interesting  and  frustrating  at  times. 


